<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        #ss{
            width: 100%;
            height: 360px;
        }
        
        p{
            color: #336699;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>扩展工作表Tab右键功能-实现选择工作表下拉框</p>
    <h6>在工作表名称处右键可以看到选择表单的选项</h6>
    <div id="ss" class="sample-spreadsheets"></div>
    <script type="text/javascript">
        // Title:选择表单对话框
        // Description：表单名称右键选择表单对话框
        // Tag:表单名称，对话框
        
        window.onload = function() {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
                sheetCount: 20
            });
        
            var openDialog = {
                text: "选择工作表",
                name: "selectSheetDialog",
                command: selectSheetDialog,
                workArea: "sheetTab"
            };
            spread.contextMenu.menuData.push(openDialog);
        };
        
        
        function selectSheetDialog(spread) {
            console.log(arguments)
        
            if (document.getElementsByClassName('sheetListBox').length === 0) {
                var sheetListBox = document.createElement('div');
                sheetListBox.className = 'sheetListBox';
                sheetListBox.innerHTML = '<label for="Dialog" class="sheetListBoxLabel">Sheet 列表</label>' +
                    '<select size="12" id="sheetSelectList" style="width:150px"></select>' +
                    '<br/>' +
                    '<input type="button" id="cancelBtn" class="btn-primary button" value="取消">';
                document.body.appendChild(sheetListBox);
        
                document.getElementById('cancelBtn').onclick = function() {
                    sheetListBox.style.display = 'none';
                };
                document.getElementById('sheetSelectList').onchange = function() {
                    var selectIndex = this.selectedIndex;
                    spread.setActiveSheetIndex(selectIndex);
                    spread.startSheetIndex(selectIndex);
                    sheetListBox.style.display = 'none';
                };
        
            }
            var sheetSelectList = document.getElementById('sheetSelectList');
            sheetSelectList.innerHTML = "";
            for (var i = 0; i < spread.sheets.length; i++) {
                var opt = document.createElement('option');
                opt.value = i;
                opt.innerHTML = spread.sheets[i].name();
                sheetSelectList.appendChild(opt);
            }
        
        
            var loginBoxEle = document.getElementsByClassName('sheetListBox')[0];
            if (loginBoxEle.style.display === 'none') {
                loginBoxEle.style.display = 'block';
            }
        }
    </script>
</body>

</html>